<template>
	<div id="city">
		<div class="city_left">
			<div>
				热门城市
			</div>
			<div>
				<button type="button" @click="city">北京</button>
				<button type="button" @click="city">上海</button>
				<button type="button" @click="city">天津</button>
				<button type="button" @click="city">合肥</button>
				<button type="button" @click="city">郑州</button>
			</div>
			<div class="zimu">
				<ul>
					<li>
						<div id="A">
							A
						</div>
						<p>阿克苏</p>
						<p>安康</p>
						<p>安庆</p>
					</li>
					<li>
						<div id="B">
							B
						</div>
						<p>白山</p>
						<p>白城</p>
						<p>宝鸡</p>
					</li>
					<li>
						<div id="C">
							C
						</div>
						<p>沧州</p>
						<p>长春</p>
						<p>昌吉</p>
					</li>
					<li>
						<div id="D">
							D
						</div>
						<p>大理</p>
						<p>大连</p>
						<p>大庆</p>
					</li>
					<li>
						<div id="E">
							E
						</div>
						<p>鄂尔多斯</p>
						<p>恩施</p>
						<p>鄂州</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="city_right">
			<div>
				<p><a href="#A">A</a></p>
				<p><a href="#B">B</a></p>
				<p><a href="#C">C</a></p>
				<p><a href="#D">D</a></p>
				<p><a href="#E">E</a></p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"CityTab",
		methods:{
			city(e){
				this.$bus.$emit('hello', e.target.innerHTML)
			}
		}
	}
</script>

<style scoped>
	.city_left{
		padding-top: 15px;
		float: left;
		width: 95%;
		background-color:antiquewhite;
		
	}
	.city_left div:nth-child(2){
		padding-bottom: 15px;
	}
	.city_right{
		float: right;
		font-weight: bold;
		background-color: white;
	}
	#city{
		overflow: hidden;
		padding-bottom: 45px;
	}
	.zimu div:nth-child(1),.city_left>div:nth-child(1){
		width: 95%;
		background-color:#EEEEEE;
		line-height: 30px;
		padding-left:15px;
		font-size: 15px;
		padding-right: 3px;
	}
	button{
		width: 90px;
		height: 30px;
		border-radius: 2px;
		background-color: white;
		border: 1px solid #cccccc;
		margin-left: 20px;
		margin-top: 15px;
	}
	.city_right div{
		position: fixed;
		right:2px;
		top:300px
	}
	li p{
		padding-left: 15px;
		padding-top: 10px;
		font-size: 15px;
	}
	li p:nth-child(4){
		padding-bottom: 10px;
		
	}
	a{
		text-decoration: none;
		color: #000000;
	}
</style>
